<template>
  <div>
    <el-drawer :visible.sync="orderPoupDrawer" jd="outDrawer" style="" direction="rtl" :modal="false" size="600px"
      :show-close="true" :before-close="PoupClose" :wrapperClosable="true" @close="$emit('closePoup')">
      <div class="drawer-tabs" style="overflow: auto">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全日房" name="first">
            <!-- 基本信息 -->
            <div class="title">基本信息</div>
            <el-form ref="form" :model="form" label-width="40px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="form.basic.name" size="small" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机">
                    <el-input v-model="form.basic.phone" size="small" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="渠道">
                    <el-select v-model="form.basic.from" size="small">
                      <el-option v-for="item in qdOptions" :key="item.channel" :label="item.channel"
                        :value="item.channel">
                        <div class="custom-select">
                          <div :style="item.color"></div>
                          <span>{{ item.channel }}</span>
                        </div>
                      </el-option>
                      <div slot="prefix">
                        <div class="custom-select--div" :style="getFromColor"></div>
                      </div>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <!-- 日历房间信息 -->
            <div class="title">
              <span>房间信息</span>
              <span>共{{ form.roomList.length }}间房</span>
            </div>
            <div class="flex-benw room-item" v-for="(item, index) in form.roomList" :key="item.id">
              <el-date-picker v-model="item.inTime" type="date" style="width: 150px" size="small">
              </el-date-picker>
              <el-input readonly :value="`${item.day.length}晚`" style="width: 68px" size="small"></el-input>
              <el-cascader @change="onChangeCascader" v-model="item.roomId" style="width: 150px" size="small" label="name"
                value="id" :options="roomType"></el-cascader>

              <el-input readonly :value="getTotalPrice(item.price)" style="width: 80px" size="small">
                <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <el-button type="text" @click="Check_in_information" class="people">
                入住人
              </el-button>
              <i class="el-icon-delete delete-icon" @click="deleteItem('room', index)"></i>
            </div>
            <div>
              <el-button type="primary" plain size="small" icon="el-icon-plus" @click="addNewRoom">添加房间
              </el-button>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addCost">添加消费</el-button>
            </div>

            <!-- 消费信息 -->
            <div class="title" v-if="form.costList.length">消费信息</div>
            <div>
              <div class="flex-benw room-item" v-for="(item, index) in form.costList" :key="item.id">
                <el-select style="width: 150px" size="small" v-model="item.program" placeholder="请选择消费项目">
                  <el-option label="双早" value="shuangzao"> </el-option>
                </el-select>

                <el-input readonly :value="`${item.num}份`" style="width: 68px" size="small"></el-input>
                <el-popover placement="bottom" popper-class="popoverColor" title="标题" width="200" trigger="click"
                  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                  <el-input v-model="item.money" style="width: 100px" size="small">
                    <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
                  </el-input>
                </el-popover>

                <el-date-picker v-model="item.time" type="date" style="width: 150px" size="small">
                </el-date-picker>
                <el-input v-model="item.money" style="width: 80px" size="small">
                  <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <span class="remark">备注</span>
                <i class="el-icon-delete delete-icon" @click="deleteItem('cost', index)"></i>
              </div>
            </div>

            <!-- 收款信息 -->
            <div class="title">收款信息</div>
            <div class="flex-benw room-item" v-for="(item, index) in form.payList" :key="item.id">
              <el-select v-model="item.type" style="width: 135px" size="small">
                <el-option label="收款" :value="1"> </el-option>
                <el-option label="收押金" :value="2"> </el-option>
              </el-select>
              <el-select v-model="item.method" style="width: 135px" size="small">
                <el-option v-for="item in payMethodOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="item.money" style="width: 80px" size="small">
                <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <el-date-picker v-model="item.time" type="date" style="width: 120px" size="small">
              </el-date-picker>
              <el-popover placement="top" trigger="click">
                <el-input type="textarea" maxlength="300" style="width:300px;"></el-input>
                <el-button class="remark" type="text" slot="reference" @click="test(item)">备注</el-button>
              </el-popover>

              <i class="el-icon-delete delete-icon" @click="deleteItem('pay', index)"></i>
            </div>
            <div>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addPay">添加收款</el-button>
            </div>

            <!-- 订单提醒 -->
            <div class="title">订单提醒</div>
            <div class="remind">
              <div class="remind-item" v-for="(item, index) in form.messages" :key="item.id">
                <div class="detail">
                  <span>{{ item.time }}</span>
                  <span>{{ item.content }}</span>
                </div>
                <div class="operate">
                  <i class="el-icon-edit" @click="edit_remark(item)"></i>
                  <i class="el-icon-delete" @click="deleteItem('tip', index)"></i>
                </div>
              </div>
            </div>
            <div>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addTips">添加提醒</el-button>
            </div>

            <!-- 备注 -->
            <div class="title">备注</div>
            <div class="desc">
              <el-input type="textarea" v-model="val" :show-word-limit="true" :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容">
              </el-input>
            </div>
          </el-tab-pane>

          <el-tab-pane label="钟点房" name="third">
            <div class="title">基本信息</div>
            <el-form ref="form" :model="hourRoom" label-width="40px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="hourRoom.basic.name" size="small" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机">
                    <el-input v-model="hourRoom.basic.phone" size="small" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="渠道">
                    <el-select v-model="hourRoom.basic.from" size="small">
                      <el-option v-for="item in qdOptions" :key="item.channel" :label="item.channel"
                        :value="item.channel">
                        <div class="custom-select">
                          <div :style="item.color"></div>
                          <span>{{ item.channel }}</span>
                        </div>
                      </el-option>
                      <div slot="prefix">
                        <div class="custom-select--div" :style="getFromColor"></div>
                      </div>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 单日房间信息 -->
            <div class="title">
              <span>房间信息</span>
              <span>共{{ hourRoom.roomList.length }}间房</span>
            </div>
            <div class="flex-benw room-item" v-for="(item, index) in hourRoom.roomList" :key="item.id">
              <el-date-picker v-model="item.inTime" type="date" style="width: 150px" size="small">
              </el-date-picker>
              <el-input readonly :value="`${item.day.length}晚`" style="width: 68px" size="small"></el-input>
              <el-cascader @change="onChangeCascader" v-model="item.roomId" style="width: 150px" size="small" label="name"
                value="id" :options="roomType"></el-cascader>

              <el-input readonly :value="getTotalPrice(item.price)" style="width: 80px" size="small">
                <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <div class="people">
                入住人
                <span>1</span>
              </div>
              <i class="el-icon-delete delete-icon" @click="deleteItem('room', index)"></i>
            </div>
            <div>
              <el-button type="primary" plain size="small" icon="el-icon-plus" @click="addNewRoom">添加房间
              </el-button>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addCost">添加消费</el-button>
            </div>

            <!-- 消费信息 -->
            <div class="title" v-if="hourRoom.costList.length">消费信息</div>
            <div>
              <div class="flex-benw room-item" v-for="(item, index) in hourRoom.costList" :key="item.id">
                <el-select style="width: 150px" size="small" v-model="item.program" placeholder="请选择消费项目">
                  <el-option label="双早" value="shuangzao"> </el-option>
                </el-select>

                <el-input readonly :value="`${item.num}份`" style="width: 68px" size="small"></el-input>
                <el-popover placement="bottom" title="标题" width="200" trigger="click"
                  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                  <el-input v-model="item.money" style="width: 100px" size="small">
                    <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
                  </el-input>
                </el-popover>

                <el-date-picker v-model="item.time" type="date" style="width: 150px" size="small">
                </el-date-picker>
                <el-input v-model="item.money" style="width: 80px" size="small">
                  <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <span class="remark">备注</span>
                <i class="el-icon-delete delete-icon" @click="deleteItem('cost', index)"></i>
              </div>
            </div>

            <!-- 收款信息 -->
            <div class="title">收款信息</div>
            <div class="flex-benw room-item" v-for="(item, index) in hourRoom.payList" :key="item.id">
              <el-select v-model="item.type" style="width: 135px" size="small">
                <el-option label="收款" :value="1"> </el-option>
                <el-option label="收押金" :value="2"> </el-option>
              </el-select>
              <el-select v-model="item.method" style="width: 135px" size="small">
                <el-option v-for="item in payMethodOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="item.money" style="width: 80px" size="small">
                <i slot="prefix" class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <el-date-picker v-model="item.time" type="date" style="width: 120px" size="small">
              </el-date-picker>
              <span class="remark">备注</span>
              <i class="el-icon-delete delete-icon" @click="deleteItem('pay', index)"></i>
            </div>
            <div>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addPay">添加收款</el-button>
            </div>

            <!-- 订单提醒 -->
            <div class="title">订单提醒</div>
            <div class="remind">
              <div class="remind-item" v-for="(item, index) in hourRoom.messages" :key="item.id">
                <div class="detail">
                  <span>{{ item.time }}</span>
                  <span>{{ item.content }}</span>
                </div>
                <div class="operate">
                  <i class="el-icon-edit"></i>
                  <i class="el-icon-delete" @click="deleteItem('tip', index)"></i>
                </div>
              </div>
            </div>
            <div>
              <el-button type="text" size="small" icon="el-icon-plus" @click="addTips">添加提醒</el-button>
            </div>

            <!-- 备注 -->
            <div class="title">备注</div>
            <div class="desc">
              <el-input type="textarea" v-model="val" :show-word-limit="true" :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容">
              </el-input>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="total-price">
        <span>
          <span class="price-title">订单金额：</span>
          <span class="price-total">￥48700.00</span>
        </span>
        <span>
          <el-button>取消</el-button>
          <el-button type="primary" @click="submitOrder">提交订单</el-button>
        </span>
      </div>
      <el-drawer :append-to-body="true" class="inner_drawer" :visible.sync="innerDrawer" :before-close="handleClose"
        size="600px">
        <template slot="title">
          <div style="line-height: 58px">
            <el-button type="text" class="returnBtn" @click="back">
              <i class="el-icon-back"></i>
              返回
            </el-button>
            <span style="margin-left: 10px; color: black">{{ form.innerTitle }}</span>
          </div>
        </template>
        <!-- 添加入住人 -->
        <div class="inner_body" v-show="form.innerForm_person.show == true" v-for="(item) in form.innerForm_person"
          :key="item.id">
          <div class="time" style="padding-left: 24px; padding-right: 24px; background: #f2f3f6">
            <span class="text-tip">{{ item.time }}</span>
            <span class="text-tip" style="max-width: 200px; word-break: break-all">{{ item.RoomType }}</span>
            <span class="text-tip">{{ item.money }}</span>
          </div>
          <span style="margin-left: 20px">入住人姓名必填</span>
          <el-form ref="form" :model="form">
            <div class="inner-info">
              <el-input class="name" style="border-radius: 20px;" v-model="item.name"></el-input>
              <el-input class="phone" v-model="item.phone"></el-input>
              <el-select v-model="item.card" placeholder="请选择">
                <el-option v-for="item in card" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input class="id" v-model="item.phone"></el-input>
            </div>
          </el-form>
        </div>
        <div class="inner_body" v-show="form.messages.show == true">
          <el-form ref="form" :model="form" v-for="item in form.messages " :key="item.id">
            <el-form-item label="提醒时间">
              <el-input v-model="item.time"></el-input>
            </el-form-item>
            <el-form-item label="提示内容">
              <el-input type="textarea" style="width: 500px;" v-model="item.content"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-drawer>

    <!-- 订单提醒 -->
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
export default {
  props: {
    data: Array,
    roomType: Array,
    order: Array,
    orderPoupDrawer: Boolean,
  },
  components: {
  },
  computed: {


    // 处理订单来了

    getFromColor() {
      // console.log(this.form)
      const targetItem = this.qdOptions.find(
        (item) => item.channel == this.form.basic.from
      )

      return targetItem.color
    },
    getData() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.form.roomList.length = 0
      const orderData = this.data.map((item) => {
        console.log(item, "===item====");
        // 给数据添加年限
        if (!item.date.includes('2022-')) {
          item.date = '2024-' + item.date
        }
        return item
      })
      // 处理数据
      const roomMap = new Map()
      // 深拷贝数据
      const copyOrder = cloneDeep(orderData)
      //  根据房间号做一个归类
      copyOrder.forEach((order) => {
        let mapOrderList = [order]
        if (roomMap.has(order.roomId)) {
          mapOrderList = roomMap.get(order.roomId).concat(order)
        } else {
        }
        roomMap.set(order.roomId, mapOrderList)
      })
      const timeGroup = new Map()
      const records = {}
      // 根据时间做一个排序
      for (let [key, value] of roomMap) {
        value = value.sort((a, b) => (a.date > b.date ? 1 : -1))
        // 需要根据时间连续的进行分组
        for (let index = 0; index < value.length; index++) {
          const key = `${value[index].date}--${value[index].roomId}`
          if (index == 0) {
            // 第一天不做计算
            timeGroup.set(key, [value[index]])
            records[key] = key
          } else {
            const lastKey = `${value[index - 1].date}--${value[index - 1].roomId
              }`
            // 比较两个时间是否相差一天
            const diffDay = dayjs(value[index].date).diff(
              value[index - 1].date,
              'day'
            )
            if (diffDay == 1) {
              // 记录上一次最小时间
              records[key] = records[lastKey]
              //   // 重新赋值
              timeGroup.set(
                records[key],
                timeGroup.get(records[key]).concat([value[index]])
              )
            } else {
              timeGroup.set(key, [value[index]])
            }
          }
        }
      }
      console.log(timeGroup, 999999999)
      for (let [key, value] of timeGroup) {
        // 找到房间类型
        const roomT = this.roomType.find(
          (item) => item.label == value[0].roomType
        )

        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.form.roomList.push({
          id: uuid(),
          inTime: key.split('--')[0],
          day: value.map((item) => item.date),
          roomId: [roomT.value, value[0].roomId],
          price: value.map((item) => {
            return {
              id: uuid(),
              time: item.date,
              day_of_week: this.week[dayjs(item.date).day()],
              value: item.date,
            }
          }),
        })
      }

      console.log(roomMap)
      console.log(timeGroup)
      console.log(copyOrder)
      return orderData
    },
  },
  data() {
    return {
      drawer: false,
      activeName: 'first',
      val: '',
      orderTipShow: true,
      innerDrawer: false,

      card: [
        {
          value: '选项1',
          label: '身份证'
        },
        {
          value: '选项2',
          label: '通行证'
        }
      ],
      week: [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ],
      room: [
        {
          channel: '101豪华大床房',
        },
        {
          channel: '102豪华大床房',
        },
        {
          channel: '201豪华海景',
        },
        {
          channel: '202豪华海景',
        },
      ],
      qdOptions: [
        {
          channel: '本地',
          color: 'background-color:#0f8ad8',
        },
        {
          channel: '携程',
          color: 'background-color:#A69340',
        },
        {
          channel: '途家',
          color: 'background-color:#FD8137',
        },
        {
          channel: 'Booking',
          color: 'background-color:#333333',
        },
        {
          channel: '小红书',
          color: 'background-color:#f40a0b',
        },
      ],
      payMethodOptions: [
        {
          label: '收款码',
          value: 1,
        },
        {
          label: '扫码付',
          value: 2,
        },
        {
          label: '飞猪代收',
          value: 3,
        },
        {
          label: '美团酒店代收',
          value: 4,
        },
        {
          label: '美团民俗代收',
          value: 5,
        },
      ],
      hourRoom: {
        basic: {
          //姓名
          name: '钟点房',
          // 手机
          phone: '18888888888',
          // 渠道
          from: '小红书',
        },
        roomList: [
          {
            id: uuid(),
            inTime: '2022-10-11',
            day: ['2022-10-10', '2022-10-11'],
            roomId: ['room-type-1', 202],
            price: [
              {
                id: uuid(),
                time: '2022-10-10',
                day_of_week: '星期一',
                value: 100,
              },
              {
                id: uuid(),
                time: '2022-10-11',
                day_of_week: '星期二',
                value: 600,
              },
            ],
          },
        ],
        costList: [],
        payList: [
          {
            id: uuid(),
            type: 1,
            method: 1,
            money: 100,
            time: new Date(),
          },
        ],
        messages: [
          {
            id: uuid(),
            time: '2022-10-11',
            content: '消息提示',
          },
        ],
      },

      form: {
        innerTitle: '',

        basic: {
          //姓名
          name: '张三',
          // 手机
          phone: '18888888888',
          // 渠道
          from: '小红书',
        },
        roomList: [
          {
            id: uuid(),
            inTime: '2022-10-11',
            day: ['2022-10-10', '2022-10-11'],
            roomId: ['title-1', 202],
            price: [
              {
                id: uuid(),
                time: '2022-10-10',
                day_of_week: '星期一',
                value: 100,
              },
              {
                id: uuid(),
                time: '2022-10-11',
                day_of_week: '星期二',
                value: 700,
              },
            ],
          },
        ],
        costList: [],
        innerForm_person: [
          {
            show: false,
            time: '入住时间：02-22',
            RoomType: '101/豪华大床房',
            money: '¥2000.00',
            name: '李大为',
            phone: '',
            card: '',
            id: ''
          },
        ],
        payList: [
          {
            id: uuid(),
            type: 1,
            method: 1,
            money: 100,
            time: new Date(),
          },
        ],
        messages: [
          {
            id: uuid(),
            time: '2022-10-11',
            content: '消息提示',
          },
        ],
      },
    }
  },
  methods: {

    back() {
      console.log("点击了返回");
      this.form.innerForm_person.show = false
      this.form.messages.show = false
      this.innerDrawer = false
    },
    test() {
      console.log('点击了备注');
    },
    PoupClose() {
      this.drawer = false
    },
    handleClose() {
      this.form.innerForm_person.show = false
      this.form.messages.show = false
      this.innerDrawer = false

    },
    Check_in_information() {
      this.form.innerTitle = "入住人信息"
      this.innerDrawer = true
      this.form.innerForm_person.show = true
    },
    /**
     * 添加提醒
     */
    addTips() {
      this.form.messages.push({
        id: uuid(),
        time: new Date().toLocaleDateString(),
        content: 'xxx',
      })
    },
    /**
     * 添加消费
     */
    addCost() {
      this.form.costList.push({
        id: uuid(),
        program: 'shuangzao',
        num: 1,
        money: null,
        time: new Date(),
      })
    },
    /**
     * 添加收款
     */
    addPay() {
      this.form.payList.push({
        id: uuid(),
        type: 1,
        method: 1,
        money: 100,
        time: new Date(),
      })
    },
    /**
     * 删除
     * @param {*} type 类型 cost消费 room房间  pay收款 tip提示
     * @param {*} index
     */
    deleteItem(type, index) {
      switch (type) {
        case 'cost':
          this.form.costList.splice(index, 1)
          break
        case 'room':
          this.form.roomList.splice(index, 1)
          break
        case 'tip':
          this.form.messages.splice(index, 1)
          break
        case 'pay':
          this.form.payList.splice(index, 1)
          break
        default:
          break
      }
    },
    edit_remark(item) {
      this.innerDrawer = true
      this.form.innerTitle = '修改提醒'
      this.form.messages.show = true
      console.log('点击了修改', item);
    },
    onChangeCascader(e) {
      console.log(e)
    },

    addNewRoom() {
      console.log('添加房间')

      this.form.roomList.push({
        id: uuid(),
        inTime: new Date(),
        day: [new Date()],
        roomId: [],
        price: [
          {
            id: uuid(),
            time: new Date(),
            day_of_week: '星期一',
            value: 123,
          },
        ],
      })
    },
    /**
     * 计算总体价格
     * @param {*} priceList
     */
    getTotalPrice(priceList) {
      const total = priceList.reduce((total, current) => {
        total += Number.parseInt(current.value)
        return total
      }, 0)
      return total
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    submitOrder() {
      console.log(this.form)
    },
  },
}
</script>

<style lang="scss" scoped src="./order-poup.scss"></style>
